<template>
	<view class="collect-box" @click="onClick">
		<image class="img" :src="getIsCollect" />
		<text class="txt">收藏</text>
	</view>
</template>

<script>
	import { mapActions } from 'vuex';
	import { userCollect } from 'api/user.js'
	export default {
		name: "article-collect",
		props: {
			articleData: {
				type: Object,
				required: true
			}
		},
		data() {
			return {};
		},
		methods: {
			...mapActions('user', ['isLogin']),
			async onClick() {
				if (!(await this.isLogin())) return
				uni.showLoading({
					title: '加载中'
				})
				await userCollect({
					articleId: this.articleData.articleId,
					isCollect: !this.articleData.isCollect
				});
				uni.hideLoading()
				this.$emit('changeCollect', !this.articleData.isCollect);
			}
		},
		computed: {
			getIsCollect() {
				return this.articleData && this.articleData.isCollect ?
					'/static/images/collect.png' :
					'/static/images/un-collect.png';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collect-box {
		display: flex;
		flex-direction: column;
		align-items: center;

		.img {
			width: $uni-img-size-base;
			height: $uni-img-size-base;
		}

		.txt {
			font-size: $uni-font-size-sm;
			color: $uni-text-color;
		}
	}
</style>
